<template>
  <view>
    <uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear"></uni-search-bar>
    <view>
      <!-- <text>当前输入为：{{ searchValue }}</text> -->
    </view>
    <view class="uni-margin-wrap">
      <swiper class="swiper flex" mode="round" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item class="flex justify-center align-center">
          <view class="swiper-item"><image src="/static/bg.jpg" class="swiper-item-img circle"></image></view>
        </swiper-item>
        <swiper-item class="flex justify-center align-center">
          <view class="swiper-item"><image src="/static/yinghua.jpg" class="swiper-item-img"></image></view>
        </swiper-item>
        <swiper-item class="flex justify-center align-center">
          <view class="swiper-item"><image src="/static/yujinxiang.jpg" class="swiper-item-img"></image></view>
        </swiper-item>
      </swiper>
    </view>
    <view class="flex justify-center">
      <button style="width: 200px;height: 200px;border-radius: 100%;" type="primary" plain="true" @click="btnTakePhoto" class="mb-4 mt-3 mx-5 flex align-center flex-column">
        <uni-icons type="camera" size="50"></uni-icons>
        <text class="font-lg">拍照识别</text>
      </button>
    </view>
    <image :src="imagepath" mode="widthFix" style="width: 100%;" class="rounded"></image>
    <view class="" style="text-align: center;width: 100%;">{{ keyword }}</view>
    <!-- <view class="" style="text-align: center;width: 100%;">{{ displayKey }}</view> -->
    <uni-card title="信息卡片" extra="额外信息">
      <text class="uni-body">{{ dsc }}</text>
    </uni-card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      imagepath: '',
      keyword: '',
      displayKey: '',
      dsc: '开始找寻你想要的植物吧',
      searchValue: ''
    };
  },
  methods: {
    search(res) {
      uni.showToast({
        title: '搜索：' + res.value,
        icon: 'none'
      });
    },
    input(res) {
      console.log('----input:', res);
    },
    clear(res) {
      // uni.showToast({
      //   title: 'clear事件，清除值为：' + res.value,
      //   icon: 'none'
      // });
    },
    blur(res) {
      // uni.showToast({
      //   title: 'blur事件，输入值为：' + res.value,
      //   icon: 'none'
      // });
      console.log(res.value)
      const data = this.searchBotany(res.value)
      console.log(data)
    },
    focus(e) {
      // uni.showToast({
      //   title: 'focus事件，输出值为：' + e.value,
      //   icon: 'none'
      // });
    },
    cancel(res) {
      uni.showToast({
        title: '点击取消，输入值为：' + res.value,
        icon: 'none'
      });
    },
    // 从拍照或者相册拿到图片,并显示到页面中
    btnTakePhoto() {
      uni.chooseImage({
        count: 1,
        success: res => {
          this.imagepath = res.tempFilePaths[0];
          this.imageTrensBase64(this.imagepath);
        }
      });
    },
    imageTrensBase64(path) {
      // #ifdef MP-WEIXIN
      wx.getFileSystemManager().readFile({
        filePath: path,
        encoding: 'base64',
        success: res => {
          console.log(res);
          this.imageClassify(res.data);
        }
      });
      // #endif

      // #ifdef APP-PLUS
      plus.io.resolveLocalFileSystemURL(this.imagepath, entry => {
        entry.file(file => {
          let reader = new plus.io.FileReader();
          reader.onloadend = e => {
            console.log(e.target.result);
            const base64 = e.target.result.substr(22);

            console.log(base64);
            this.imageClassify(base64);
          };
          reader.readAsDataURL(file);
        });
      });
      // #endif
    },
    async imageClassify(base64) {
      uniCloud.callFunction({
        name: 'ImageClassify',
        data: {
          image: base64
        },
        success: res => {
          // console.log(res);
          this.parseResult(res.result.result);
        }
      });
    },
    // 展示图像识别结果
    parseResult(result) {
      var itemList = [];
      var abs_result_index;
      for (var i = 0; i < result.length; i++) {
        itemList.push(result[i].keyword + '' + result[i].score);
        if (result[i].score >= 0.7) {
          abs_result_index = i;
          break;
        }
      }
      if (abs_result_index >= 0) {
        console.log(result[abs_result_index].keyword);
        this.dsc = '';
        this.searchBotany(result[abs_result_index].keyword);
        return;
      }
      uni.showActionSheet({
        itemList: itemList,
        success: res => {
          console.log(result[res.tapIndex].keyword);
          this.keyword = result[res.tapIndex].keyword;
          // this.searchKeyword(result[res.tapIndex].keyword)

          this.searchBotany(result[res.tapIndex].keyword);
        }
      });
    },
    // 信息描述API（Mock）
    searchBotany(keyword) {
      uni.request({
        url: 'https://console-mock.apipost.cn/app/mock/project/70a04b13-b827-47b1-add5-9baf00e54773/ling?' + keyword,
        method: 'GET',
        data: {
          name: keyword
        },
        success: res => {
          res.data.data.some(item => {
            if (item.name.includes(keyword)) {
              this.displayKey = item.name
              // console.log(this.displayKey)
              this.dsc = item.dsc;
              // console.log(item.name.includes(keyword));
              return;
            }
          });
          //   res.data.data.forEach(item => {
          //     if (item.name != keyword) {
          //       this.dsc = '抱歉，找不到你想要的'
          //       console.log(item.name.includes(keyword))
          //     }
          // })
        }
      });
    }
  }
};
</script>

<style lang="scss">
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}
.swiper {
  width: 100%;
  height: 300rpx;
  border-radius: 30rpx;
}
.swiper-item {
  width: 670rpx;
  height: 300rpx;
}
.swiper-item-img {
  width: 100%;
  height: 300rpx;
  border-radius: 5%;
}
.swiper-list {
  margin-top: 40rpx;
  margin-bottom: 0;
}
.uni-common-mt {
  margin-top: 60rpx;
  position: relative;
}
.info {
  position: absolute;
  right: 20rpx;
}
.uni-padding-wrap {
  width: 550rpx;
  padding: 0 100rpx;
}
</style>
